<template>
  <div class="inventory bgImg">
    <div class="body">
      <div class="body-title wenzi">
        <h1>归档</h1>
        <i class="iconfont icon-xian-xuxian"></i>
        <span>Archives</span>
      </div>
      <div class="body-time">
        <div class="block">
          <el-timeline>
            <el-timeline-item :timestamp="tdItem.data_time" placement="top" v-for="tdItem in timeData" :key="tdItem.data_id">
              <el-card>
                <h4 @click="go(tdItem)">{{tdItem.data_time}}</h4>
                <h4 @click="go(tdItem)">{{tdItem.title}}</h4>
              </el-card>
            </el-timeline-item>

          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
data(){
  return {
    timeData:[],
  }
},
mounted(){
  this.getData()
},
methods:{
  async getData(){
    const {data:res} = await this.$http.get("getDataDesc");
    console.log("这里是归档");
    console.log(res);
    if(res.status != 200){
        this.$message.error('获取归档数据失败');
    }else{
      this.timeData = res.message;
    }
  },
  async go(item){
    console.log(item);
      let id = item.data_id;
      let readAmount = item.readAmount;
      const {data:res} = await this.$http.post("adddDetailCount",{id,readAmount})
      console.log(res);
      if(res.status != 200){
        this.$message.error('操作失败');
      }else{
        this.$router.push({path:'/details',query:{id:id}})
      }
  }
}
}
</script>
<style scoped>
.body-title {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
.body-time {
  background: rgba(255,255,255,.5);
  width: 100%;
}
.block {
  width: 350px;
  margin: 10px auto;

}
.block h4:hover {
  cursor: pointer;
  color: orange;
}
</style>
